<template>
  <view class="tabbar-container">
    <block>
      <view class="border_box" :style="{paddingBottom:is_lhp?'40rpx':''}">
        <view class="tabBar_miden_border"></view>
      </view>
      <!-- 针对中间的导航栏  通过true来判断控制类名和样式 -->
      <view class="tabbar-box">
        <view class="tabbar-item" v-for="(item, index) in tabbarList"
              :class="[item.centerItem ? 'center-item' : '']" @click="changeItem(item)" :key="index">
          <view class="item-top">
            <image :src="currentItem == item.id ? item.selectIcon : item.icon"></image>
          </view>
          <!-- <u-icon name="edit-pen"></u-icon> -->
          <!-- 通过三元判断控制类名 达到控制选中和未选中的样式 -->
          <view class="item-bottom" :class="[currentItem == item.id ? 'item-active' : '']">
            <text>{{ item.text }}</text>
          </view>
        </view>
      </view>
    </block>
  </view>
</template>

<script>
// 组件的书写符合easycom规范 无需引入直接使用
import {goNav} from "../utils/common";

export default {
  props: {
    currentPage: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      show: false,
      currentItem: 0,
      is_lhp: true,
      tabbarList: [{
        id: 0,
        path: '/pages/home/index',
        icon: '/static/images/app_normal.png',
        selectIcon: '/static/images/app.png',
        text: '首页',
      },
        {
          id: 1,
          path: '/pages/article/index',
          icon: '/static/images/file-paste_normal.png',
          selectIcon: '/static/images/file-paste.png',
          text: '模版',
        },
        {
          id: 2,
          path: '/pages/tabbar/index',
          icon: '/static/images/edit-1@2x.png',
          selectIcon: '/static/images/edit-1@2x.png',
          // 通过类名class控制样式大小
          centerItem: true
        },
        {
          id: 3,
          path: '/pages/contract/index',
          icon: '/static/images/server_normal.png',
          selectIcon: '/static/images/server.png',
          text: '合同管理'
        },
        {
          id: 4,
          path: '/pages/my/index',
          icon: '/static/images/user1.png',
          selectIcon: '/static/images/user.png',
          text: '我的'
        }
      ]
    }
  },
  mounted() {
    this.currentItem = this.currentPage
    // 隐藏原来的tabBar导航栏
    // uni.hideTabBar()
  },
  methods: {
    changeItem(item) {
      let _this = this
      console.log(item.id)
      if (item.id == 2) {
        this.show = true;
      }
      uni.switchTab({
        url: item.path
      })
    },
    open() {
    },
    close() {
      this.show = false

    },
    hanleclick(url, num) {
      if (num == 2) {
        this.close();
      }

      goNav(url);
    }
  }
};
</script>
<style lang="less" scope>
view {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.tabbar-container {
  width: 100%;
  position: fixed;
  bottom: 0rpx;
  left: 0rpx;
  width: 100%;
  height: 110rpx;
  box-shadow: 0 0 5px #999;
  padding: 5rpx 0;
  color: #999999;
  background: #FFFFFF;
  border: 1rpx solid #E7E7E7;
  z-index: 10000;

  .tabbar-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* 针对tabbar的统一处理 */

  .tabbar-item {
    width: 33.33%;
    height: 100rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

    .item-top {
      width: 54rpx;
      height: 54rpx;
      padding: 10rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    // 未被选中的导航栏字体
    .item-bottom {
      font-size: 26rpx;
      width: 100%;
      color: rgba(0, 0, 0, 0.6);
      font-weight: 400;
    }

    // 被选中的导航栏字体
    .item-active {
      color: #4787F0;
    }
  }

  // 最中间的tabbar导航栏
  .center-item {
    display: block;
    position: relative;
    cursor: pointer;

    .item-top {
      z-index: 1000;
      flex-shrink: 0;
      width: 52px;
      height: 52px;
      position: absolute;
      top: -10px;
      left: calc(50% - 26px);
      border-radius: 50%;
      background-color: #4787F0;
      display: flex;
      justify-content: center;
      align-items: center;

      image {
        width: 58rpx;
        height: 58rpx;
      }

      &::after {
        content: "";
        position: absolute;
        left: 0;
        color: #fff;
        width: 48rpx;
        height: 48rpx;
        // background: url("../static/images/edit-1@2x.png") no-repeat;
        background-size: contain;
        left: 50%;
        top: 50%;
        margin-top: -24rpx;
        margin-left: -24rpx;
      }
    }


    .item-bottom {
      position: absolute;
      bottom: 5rpx;
    }

    .item-active {
      position: absolute;
      bottom: 5rpx;
      color: #1fff;
    }
  }

  .border_box {
    width: 100%;
    height: 63rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: 0px;
    bottom: 50rpx;
    z-index: 100;
    pointer-events: none;

    .tabBar_miden_border {
      width: 76px;
      height: 37px;
      border-top: 2px solid #E5E5E5;
      border-radius: 198px 198px 0 0;
      background: #fff;
    }
  }
}

.bottom-popup-box {
  padding: 0 66rpx;

  .popup-line {
    width: 100rpx;
    height: 8rpx;
    border-radius: 8rpx;
    background-color: #fff;
    margin: auto;
    margin-top: 18rpx;
  }

  .custom-style {
    margin-top: 46rpx;
    border-radius: 46rpx;
    font-weight: bold;
    margin-bottom: 32rpx;
  }

  .button {
    display: flex;
    margin-bottom: 56rpx;

    .custom-style {
      margin: 0 10rpx;
      padding: 0;
      flex: 1;
      margin-top: 0px;
      height: 64rpx;
      background: rgba(255, 255, 255, 0.4);
      border-radius: 46rpx;
      backdrop-filter: blur(4px);
      border: none;
      color: #fff;
    }
  }

  .bottom-file-list {
    max-height: 650rpx;
    overflow-y: auto;

    .flex {
      margin-bottom: 32rpx;
      align-items: center;
      color: #fff;
      font-size: 26rpx;
      font-weight: 400;
      justify-content: space-between;
      text-align: center;
      align-items: center;

      .u-icon {
        display: inline-block;
      }
    }

    .custom-style {
      width: 200rpx !important;
      height: 50rpx;
      background: rgba(71, 135, 240, 0.3);
      border-radius: 46rpx;
      border: none;
      font-size: 20rpx;
      color: #CDDFF7;
      font-weight: 400;
      padding: 0;
      margin: 0px;
      margin-left: 10rpx;
    }
  }
}
</style>
